<!-- DstPortChargesContent.vue -->
<template>
  <BaseFreightTable
      :headers="headers"
      v-model:tableData="localTableData"
      @update:tableData="updateTableData"
      :matchingLocationsHeaders="matchingLocationsHeaders"
      :matchingLocationsData="matchingLocationsData"
      :feeHeaders="feeHeaders"
      :feeData="feeData"
      :businessType="businessType"
  />
</template>

<script>
import BaseFreightTable from './BaseFreightTable.vue'

import { commonFeeHeaders, getCommonTableData, getCommonFeeData ,getCommonHeader} from './sharedFreightData.js'

export default {
  components: {
    BaseFreightTable
  },
  name: 'DstPortChargesContent',
  props: {
    isOriginPort: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
       businessType: 'DST',
       headers : [

        { field: 'endPort', ...getCommonHeader('endPort') },
        { field: 'startPort', ...getCommonHeader('startPort') },

        { field: 'triangleTrade', ...getCommonHeader('triangleTrade') },
        { field: 'transitPort', ...getCommonHeader('transitPort') },
        { field: 'transportMode', ...getCommonHeader('transportMode') },
        { field: 'containerULD', text: '集装箱/ULD', cellType: 'cellText', width: '100px' },
        { field: 'containerGrade', ...getCommonHeader('containerGrade') },
        { field: 'controlCustomer', ...getCommonHeader('controlCustomer') },
        { field: 'shipper', ...getCommonHeader('shipper') },
        { field: 'portOfLoading', text: '港口运输地址', cellType: 'cellText', width: '100px' },
        { field: 'postcode', text: '邮编', cellType: 'cellText', width: '100px' },
        { field: 'carrier', ...getCommonHeader('carrier') },
        { field: 'carrierCode', ...getCommonHeader('carrierCode') },
        { field: 'serviceLiver', ...getCommonHeader('serviceLiver') },
        { field: 'carrierLevel',...getCommonHeader('carrierLevel')  },
        { field: 'product', ...getCommonHeader('product') },
        { field: 'commLocal', ...getCommonHeader('commLocal') },
        { field: 'startDate', ...getCommonHeader('startDate') },
        { field: 'expiryDate', ...getCommonHeader('expiryDate') },
        { field: 'contractLink', ...getCommonHeader('contractLink') },
        { field: 'contractNo', ...getCommonHeader('contractNo') },
        { field: 'publish', ...getCommonHeader('publish') }
      ],
      localTableData: getCommonTableData(),
      matchingLocationsHeaders: ['Field', 'Location'],
      matchingLocationsData: [
        { field: 'Field 1', location: 'Location 1' },
        { field: 'Field 2', location: 'Location 2' },
      ],
      feeHeaders: commonFeeHeaders,
      feeData: getCommonFeeData()
    }
  },
  mounted() {
    console.log('Headers in PortChargesContent:', this.headers);
    const transportModeHeader = this.headers.find(h => h.field === 'transportMode');
    console.log('TransportMode comboxlist:', transportModeHeader?.comboxlist);
    const carrierHeader = this.headers.find(h => h.field === 'carrier');
    console.log('Carrier searchObj:', carrierHeader?.searchObj);
  },
  methods: {
    updateTableData(newData) {
      console.log('PortChargesContent updateTableData:', newData);
      this.localTableData = newData.map(row => ({
        ...row,
        startDate: typeof row.startDate === 'string' ? row.startDate : '',
        expiryDate: typeof row.expiryDate === 'string' ? row.expiryDate : ''
      }));
    }
  }
}
</script>




